<div class="content-wrapper search-view-container">
    <div class="search-container container-fluid">

        <div ng-show="!search.showMap" class="title-as-current-search-term">
            <span>{{root.globalSearchTerm}}</span>
        </div>
        <!-- <div ng-if="!search.statuses" class="input-container container">
            <form ng-submit="search.update(term)" class="navbar-form navbar-left" role="search">
           <div class="form-group">
             <input ng-model="term" type="text" class="form-control" id="navbar-search-input" placeholder="Search">
           </div>
         </form>
            <div class="clearfix"></div>
         </div> -->

         <!-- Filters -->
         <div class="container content-container search-filters-container">
             <div ng-show="search.showResult" class="filters-container">
                 <ul class="search-modes">
                     <!-- General filters -->
                     <li  ng-class="(root.globalFilter === 'live') ? 'active' : ''" ng-click="search.filterLive()">
                         <a href="#">live</a>
                     </li>
                     <li  ng-class="(root.globalFilter === 'accounts') ? 'active' : ''" ng-click="search.filterAccounts()">
                         <a href="#">accounts</a>
                     </li>
                     <li  ng-class="(root.globalFilter === 'photos') ? 'active' : ''" ng-click="search.filterPhotos()">
                         <a href="#">photos</a>
                     </li>
                     <li ng-class="(root.globalFilter === 'videos') ? 'active' : ''" ng-click="search.filterVideos()">
                         <a href="#">videos</a>
                     </li>
                     <li ng-class="(root.globalFilter === 'map') ? 'active' : ''" ng-click="search.filterMap()">
                         <a href="#">map</a>
                     </li>
                     <li><a href="./advancedsearch">More options</a></li>
                 </ul>
             </div>
         </div>
        
        <!-- Main content -->
        <div class="container content-container">
            <!-- Left content: Who to follow, trends -->
            <div ng-show="!search.showMap" class="dashboard dashboard-left col-lg-3 col-md-3">
                <!-- Right content: Other statistics -->
                <div class="search-view-user-trends col-md-8">
                    <div class="home-user-trends">
                        <h3 class="trend-title">Trends</h3>
                        <ul id="home-trend-list">
                            <li><a href="./search?q=%23loklak">#loklak</a></li>
                            <li ng-repeat="(key, value) in root.trends">
                                <!-- -->
                                <a href="./search?q=%23{{key}}">#{{key}}</a>
                                <!-- -->
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Center result + option filters -->
            <div ng-show="search.showResult" ng-class="(search.peopleSearch) ? 'result-container col-lg-9' : 'result-container col-md-6'">
               

                <!-- New status from background updating process -->
                <button ng-show="search.newStasuses.length > 0" class="more-result" ng-click="search.showNewStatuses();">Load {{search.noOfNewStatuses}} new results!</button>

                <!-- Main results -->
                <div ng-if="!search.peopleSearch" class="main-result-container" infinite-scroll="loadMore(15)" infinite-scroll-distance="1">
                    <div ng-repeat="status in search.statuses track by $index" status open-swipe="search.openSwipe" data="status">
                    </div>   
                </div>

                <!-- People results -->
                <div ng-if="search.peopleSearch" class="main-result-container" infinite-scroll="loadMore(3)" infinite-scroll-distance="1">
                    <div class="col-md-4 col-sm-6 account-item" ng-repeat="account in search.accountsPretty | limitTo: search.showingResultInAcc" account data="account"></div>
                </div>

               
            </div>
             <!-- Map result -->
            <div ng-show="search.showMap" class="search-map-wrapper map-container-parent">
                <div id="search-map"></div>
            </div>

            <!-- Right content: Other statistics -->
            <div ng-show="!search.showMap" class="dashboard dashboard-right col-md-3">
            </div>

        </div>
    </div>
</div>